<!--
 * @Description  : 公共页面整体布局
 * @Author       : YiDing Xue
 * @Date         : 2023-02-24
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-07
-->
<template>
  <transition name="fade-slide" mode="in-out" appear>
    <section class="overflow-x-hidden color-black bg-[#f5f6f8]">
      <div v-if="placeholder" h-48 />
      <header v-if="showHeader" ref="root" :class="headerClass" flex justify-between items-center w-100vw h-48 fixed top-0 z-100 px-15>
        <RectLeft @click="goBack" :color="backColor" />
        <slot v-if="$slots.center" name="center" />
        <router-link :to="rightIcon.path">
          <RectLeft :color="rightColor" />
          <!-- <TheIcon :icon="leftIcon.icon" v-bind="props.rightIcon" /> -->
        </router-link>
      </header>
      <article :class="articleClass">
        <slot />
      </article>
      <AppFooter v-if="showFooter" />
    </section>
  </transition>
</template>
<script setup>
import { RectLeft } from '@nutui/icons-vue';
import { useRouter } from 'vue-router'
const props = defineProps({
  leftIcon: {
    type: Object,
    default: () => {
      return { icon: 'uil:angle-left-b', size: 32, path: 'home', color: '#999' }
    }
  },
  rightIcon: {
    type: Object,
    default: () => {
      return { icon: 'zondicons:user-solid-square', size: 32, path: 'personal-center', color: 'black' }
    }
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  headerClass: {
    type: String,
    default: 'bg-white'
  },
  backColor: {
    type: String,
    default: 'white'
  },
  rightColor: {
    type: String,
    default: '#3d8ffd'
  },
  placeholder: {
    type: Boolean,
    default: true
  },
  articleClass: {
    type: String,
    default: 'p-15'
  }
})
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
</script>
<style>
section::-webkit-scrollbar {
  display: none;
}
.left-back svg {
  fill: white;
  stroke: white;
  stroke-width: 2px;
}
</style>
